<extend name="Common@Common:layui_cdn" />
<block name="title">
    <title>编辑文章内容</title>
</block>

<block name="style">
    <style>
        .fl {
            float: left;
        }
        
        .fr {
            float: right;
        }
        
        #editor {
            width: 100%;
            min-height: 300px;
        }
        
        .img-wrap {
            background: #f8f8f8;
            text-align: center;
            width: 200px;
        }
        
        .img-wrap>span,
        .video-fengmian {
            font-size: 60px;
            line-height: 207px;
            color: #eee;
        }
        
        .img-wrap img {
            width: 100%;
            cursor: pointer;
        }
        
        #filelist li {
            border: 1px dashed #ccc;
            padding: 5px 10px 5px 10px;
            font-size: 14px;
            width: 600px;
            margin-bottom: 10px;
        }
        
        #filelist li .fl a {
            line-height: 38px;
            padding: 0 50px 0 10px;
            color: #009688;
            height: 38px;
            display: inline-block;
        }
        
        #filelist li .fl a:hover {
            background: #f8f8f8;
        }
        
        ul.imglist li {
            float: left;
            margin-right: 20px;
        }
        
        ul.imglist li .img-btn {
            margin-top: 5px;
        }
        
        ul.imglist li .img-btn .layui-input-block {
            margin-left: 0;
            margin-bottom: 5px;
        }
        
        ul.imglist li .img-btn .layui-inline {
            margin-right: 0;
            margin-bottom: 0;
        }
        /***********/
        
        .cue {
            color: red;
            font-weight: 600;
            font-size: 18px;
            line-height: 50px;
        }
    </style>
</block>

<block name="main">
    <form class="layui-form layui-form-pane close-dialog" style="padding:20px;" onsubmit="return false;" action="/api/content/edit_video_post" method="post">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">基本内容</li>
                <li>图片管理</li>
                <li>音视频管理</li>
            </ul>

            <div class="layui-tab-content">
                <!-- 基本内容 -->
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label">标题：</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" value="{$info.title}" id="title" required lay-verify="required" placeholder="请输入文章标题" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">作者</label>
                        <div class="layui-input-inline" style="margin-bottom:10px;">
                            <input type="text" name="author" value="{$info.author}" placeholder="请输入作者，非必需" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <!-- 封面管理 -->
                <div class="layui-tab-item">
                    <p class="cue">只可上传图片</p>
                    <div class="layui-form-item">
                        <label class="layui-form-label">封面图</label>
                        <div class="layui-input-block">
                            <input type="text" id="fengmian" name="fengmian" style="width:500px;display:inline-block" value="{$info.fengmian}" placeholder="请输入封面图地址" class="layui-input">
                            <button type="button" class="layui-btn" id="fengmianupload">
							    <i class="layui-icon">&#xe67c;</i>上传图片
							</button>
                            <span style="color: red;">（图片大小不能超过3M）</span>
                        </div>
                        <div style="padding-top:10px;">
                            <div class="img-wrap" id="fengmian-box">
                                <span>封面</span>
                            </div>
                        </div>
                    </div>

                </div>

                <!-- 视频管理 -->
                <div class="layui-tab-item">
                    <p class="cue">只可上传音频或视频文件</p>
                    <!-- 视频上传 -->
                    <div class="layui-form-item">
                        <button type="button" class="layui-btn " id="videoupload">
                            <i class="layui-icon">&#xe67c;</i>上传文件
                        </button>
                    </div>
                    <div class="layui-form-item">
                        <table class="layui-table video-box">
                            <thead>
                                <tr>
                                    <th style="width: 350px;">文件名称</th>
                                    <th style="width: 150px;">文件类型</th>
                                    <th style="width: 150px;">文件大小</th>
                                    <th>详细信息</th>
                                    <th style="width: 100px;">操作</th>
                                </tr>
                            </thead>
                            <tbody class="videolist" id="videolist"></tbody>
                        </table>
                        <script id="videolistTpl" type="text/html">
                            <tr id="video-box-{{d.id}}" style="opacity: 1;">
                                <td class="progressName">{{d.name}}
                                    <div class="imgWrapper">
                                        {{# if(d.type == '视频'){ }}
                                        <img src="{{d.url}}?vframe/jpg/offset/5" onclick="window.open('{{d.url}}')"> {{# } }}
                                    </div>
                                </td>
                                <td class="progressType">{{d.type}}</td>
                                <td class="progressFileSize">
                                    {{d.size}}M
                                </td>
                                <td>
                                    <div class="info">
                                        <div class="">
                                            <strong>地址:</strong>
                                            <a href="{{d.url}}" target="_blank"> 
                                                {{d.url}}
                                            </a>
                                            <div class="hash">
                                                <strong>Hash:</strong>{{d.key}}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <a href="javascript:;" data-id="{{d.id}}" class="layui-btn layui-btn-danger del-video">删除</a>
                                </td>
                                <input type="hidden" name="videos[]" value="{{d.id}}">
                                <input type="hidden" name="types[]" value="{{d.type}}">
                            </tr>
                        </script>
                    </div>
                </div>

                <div class="layui-form-item">
                    <!-- <input type="hidden" name="pid" id="pid" value="{$_REQUEST['pid']}"> -->
                    <input type="hidden" name="id" id="id" value="{$_REQUEST['id']}">
                    <button class="layui-btn" lay-submit="" lay-filter="*">确定</button>
                </div>
            </div>
        </div>
    </form>

</block>

<block name="script">
    <js href="/Public/umeditor/third-party/jquery.min.js" />
    <!-- 配置文件 -->
    <script type="text/javascript" src="/Public/
    iu_ueditor/ueditor.config.js?v=1.0.5"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="/Public/qiniu_ueditor/ueditor.all.js?v=1.0.9"></script>
    <js href="/Public/plupload/moxie.js" />
    <js href="/Public/plupload/plupload.dev.js" />
    <js href="/Public/plupload/i18n/zh_CN.js" />
    <js href="/Public/Qiniu/ui.js" />
    <js href="/Public/Qiniu/qiniu.js" />
    <js href="/Public/Qiniu/main.js?v=1.0" />
    <js href="/Public/plupload/jquery.zxfdragsort.js?v=1" />
    <script>
        layui.use(['jquery', 'think', 'element', 'upload', 'laytpl'], function() {
            $ = layui.jquery,
                think = layui.think,
                upload = layui.upload,
                laytpl = layui.laytpl;

            var pid = $('#pid').val();
            var id = $('#id').val();


            // 封面图上传
            upload.render({
                elem: '#fengmianupload',
                url: '/api/upload/qiniu_upload_content?type=image',
                accept: 'images',
                acceptMime: 'image/*',
                exts: 'jpg|png|gif|jpeg|bmp',
                multiple: true,
                before: function() {
                    ii = layer.msg('上传中...', {
                        icon: 16,
                        time: 10000
                    });
                },
                done: function(ret) {
                    //上传完毕回调
                    if (ret.status == 1) {
                        layer.msg("上传成功", {
                            icon: 1,
                            time: 1500
                        });
                        $('#fengmian').val(ret.data.url);
                        $('#fengmian-box span').html('<img src="' + ret.data.url + '">');
                        layer.close(ii);
                    } else {
                        layer.alert(ret.info);
                    }
                },
                error: function(ret) {
                    // console.log(ret);
                }
            });

            if ($('#fengmian').val() != '') {
                change_fengmian($('#fengmian').val());
            }

            function change_fengmian(url) {
                $('#fengmian-box span').html('<img src="' + url + '">');
                $('#fengmian-box span').unbind('click').click(function() {
                    var $this = $(this);
                    //调用示例
                    layer.photos({
                        photos: '#fengmian-box',
                        anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                    });
                });
            }

            // 如果已经该文章已有附件，渲染数据
            // var fileTpl = $('#filelistTpl').html();
            var imgTpl = $('#imglistTpl').html();
            var videoTpl = $('#videolistTpl').html();
            // load_files(id);
            load_images(id);
            load_videos(id);

            function load_images(id) {
                $.get('/api/content/get_video_images_data?fk_id=' + id, function(ret) {
                    if (ret.status) {
                        // console.log(ret.data);
                        var imghtml = "";
                        for (var i = 0; i < ret.data.data.length; i++) {
                            laytpl(imgTpl).render(ret.data.data[i], function(html) {
                                imghtml += html;
                            });
                        }

                        $('#imglist').html(imghtml);
                        listen_del_img(); //监听删除
                        // listen_img_click(); //监听点击
                    }
                });
            }

            function load_videos(id) {
                $.get('/api/content/get_video_url_data?fk_id=' + id, function(ret) {
                    console.log(ret);
                    if (ret.status) {
                        var videohtml = "";
                        for (var i = 0; i < ret.data.data.length; i++) {
                            ret.data.data[i].size = (ret.data.data[i].size / 1024 / 1024).toFixed(2);

                            if ($.inArray(ret.data.data[i].type, ['mp3', 'wav', 'avi', 'mid', 'wma']) != -1) {
                                ret.data.data[i].type = '音频';
                            }
                            if ($.inArray(ret.data.data[i].type, ['mp4', 'rmvb', 'rm', 'asf', 'mpg', 'wmv', 'flv', 'swf']) != -1) {
                                ret.data.data[i].type = '视频';
                            }

                            laytpl(videoTpl).render(ret.data.data[i], function(html) {
                                videohtml += html;
                            });
                        }
                        $('#videolist').html(videohtml);
                        listen_del_video(); //监听删除
                    }
                });
            }

            // 监听图片删除
            function listen_del_img() {
                //需要先解除原先绑定的事件，防止重复执行
                $('.del-image').unbind('click').click(function() {
                    var id = $(this).attr('data-id');
                    var ii = layer.confirm("确定删除这张图片吗？", function() {
                        layer.close(ii);
                        $.get('/api/content/del_images/ids/' + id, function(ret) {
                            if (ret.status) {
                                $('#img-box-' + id).remove();
                            } else {
                                layer.alert(ret.info);
                            }
                        });
                    });
                })
            }

            // 视频上传
            upload.render({
                elem: '#videoupload',
                url: '/api/upload/qiniu_upload_content?type=media',
                accept: 'video',
                // acceptMime: 'video/*',
                exts: 'swf|flv|mp3|wav|wma|wmv|mid|avi|mpg|asf|rm|rmvb|mp4',
                multiple: true,
                before: function() {
                    ii = layer.msg('上传中...', {
                        icon: 16,
                        time: 10000
                    });
                },
                done: function(ret) {
                    //上传完毕回调
                    if (ret.status == 1) {
                        layer.msg("上传成功", {
                            icon: 1,
                            time: 1500
                        });
                        console.log(ret.data);
                        ret.data.size = (ret.data.size / 1024 / 1024).toFixed(2);

                        if ($.inArray(ret.data.type, ['mp3', 'wav', 'avi', 'mid', 'wma']) != '-1') {
                            ret.data.type = '音频';
                        }
                        if ($.inArray(ret.data.type, ['mp4', 'rmvb', 'rm', 'asf', 'mpg', 'wmv', 'flv', 'swf']) != '-1') {
                            ret.data.type = '视频';
                        }

                        laytpl(videoTpl).render(ret.data, function(html) {
                            $('#videolist').append(html);
                            listen_del_video(); //监听删除
                        });
                        layer.close(ii);
                    } else {
                        layer.alert(ret.info);
                    }
                },
                error: function(ret) {
                    // console.log(ret);
                }
            });

            // 监听视频删除
            function listen_del_video() {
                //需要先解除原先绑定的事件，防止重复执行
                $('.del-video').unbind('click').click(function() {
                    var id = $(this).attr('data-id');
                    var ii = layer.confirm("确定删除这个视频吗？", function() {
                        layer.close(ii);
                        $.get('/api/content/del_video_url/ids/' + id, function(ret) {
                            if (ret.status) {
                                $('#video-box-' + id).remove();
                            } else {
                                layer.alert(ret.info);
                            }
                        });
                    });
                })
            }


        });
    </script>
</block>